<template>
	<view class="page">
		
		<view class="top-page">
			<view class="label2"></view>
			<view class="sou">
				<view class="s"></view>
				<input class="sear"/>
			</view>
				
			
			
			
		
		</view >
	<!-- 	<view class="bottom_page">
			<image :src="url" mode="" class="im1"></image>
			<image :src="url" mode="" class="im1"></image>
		</view> -->
	
			<view class="container">
				<uni-tag :inverted="true" text="learn" type="error"></uni-tag>
				<uni-tag :inverted="true" text="考研" type="error"></uni-tag>
				<uni-tag :inverted="true" text="自习室" type="error"></uni-tag>
				<uni-tag :inverted="true" text="图书馆" type="error"></uni-tag>
			</view>
			<view class="add">
				<image class="add_img" src="../../static/images/学习/u254.png"></image>
				<view class="add_label">添加标签</view>
			</view>
		
		
		
		
	</view>
</template>

<script>

	export default {
		
		props: {
			item:{
				type:Object,
				default(){
					return{
						name:'咚咚小圆帽',
						label:'10.27'
					}
				}
			},
			url: String,
			default: ''
		},
		
		data() {
		    return {
			  
		      imgUrl: '/static/clap.png' ,// 初始图片地址
			  m1:'/static/pika.jpg',
			  title:'蹲图书馆学习搭子',
			  flowOptions:{
			              flowList:[
			                  // {   // 为Obj类型
			                  //  type:'',
			                  //  name:'Android'
			                  // },
			                  '考研','25','数学'//为String类型
			                  
			              ],
			              flowItemValue:'',//String类型可不填或空 Obj类型时必填，以上为例，填name
			              flowItemMargin:'10',
			              flowItemRadius:'8',
			  			flowItemBgColor:'#FFFFF0',
			  			flowItemTextSize:'15',
			  			flowItemTextColor:'#ffb999'
			          },
			  imageSources: [
			          '/static/lightyellow.png',
					  '/static/lightyellow.png',
					  '/static/lightyellow.png',
					  '/static/lightyellow.png'
			          
					  
			        ],
			  
			  scrollTop: 0,
			  				old: {
			  					scrollTop: 0
			  				}
		    }
		  },
		  
		methods: {
			getData() {
				//获取后端标签接口
				uni.request({
					url:"https://www.fastmock.site/mock/a0dd2ac5709c6e86ee6b3c7899f837bd/parttest/demo/get",
					success:res=>{
						console.log(res)
						this.name=res.data
						this.label=res.data
					}
				})
			},
		    changeImg() {
		      this.imgUrl = '/static/succe.png'; // 修改后的图片地址
		    },
			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			handleClick() {
				console.log('@@')
			      // window.location.href = '../pages/partner_details/partner_details.vue';
				uni.navigateTo({
					url: '/pages/partner_details/partner_details'
				})
			}
			
		  },
		  onLoad(){
		  			  this.getData();
		  }
		  
	}
</script>

<style lang="scss">
	.page{
		background-color: white;
		width: 680rpx;
		height: 280rpx;
		
		// background-color: lightblue;
		border-radius: 30rpx;
		box-shadow: 8rpx 10rpx 10rpx 10rpx rgb(211,211,211);
		margin-bottom: 80rpx;
		margin-left: 25rpx;
		margin-right: 15rpx;
		margin-top: 50rpx;
		// RBG(201,254,241)
		position: relative;
		.top-page{
			width: 100%;
			height: 100rpx;
			background-color: white;
			border-radius: 20rpx;
			
			position: relative;
			.label2{
				background: url('/static/biaoqian.png');
				background-size: cover;
				position: absolute;
				left: -60rpx;
				top: 0rpx;
				width: 300rpx;
				height: 100rpx;
			}
			
			.sou{
				width: 450rpx;
				height: 70rpx;
				border-radius: 50rpx;
				position: absolute;
				left: 220rpx;
				top: 25rpx;
				// background-color: rgba(255,255,255,0.5);
				background-color: #f2f2f2;
				.s{
					margin-bottom: 30rpx;
					margin-left: 20rpx;
					width: 50rpx;
					height: 50rpx;
					background-image: url('/static/images/学习/u257.png');
					background-size: cover;
					display: inline-block;
				}
				.sear{
					margin-left: 20rpx;
					
					width: 250rpx;
					height: 90rpx;
					
					display: inline-block;
					
					
				}
			}
			
				
			
			
		}
		
			
			.container{
				width: 97%;
				margin-top: 20rpx;
				.label1{
					background-color: rgba(254,237,211,0.5);
					left: 30rpx;
					
				}
			}
			.add{
				width: 200rpx;
				height: 90rpx;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				.add_img{
					width: 50rpx;
					height: 50rpx;
					display: inline-block;
					margin-top: 30rpx;
				}
				.add_label{
					display: inline-block;
					width: 140rpx;
					height: 50rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: rgb(128,128,128);
					overflow:auto;
					margin-top: 30rpx;
					margin-left: 10rpx;
				}
			}
	
				
			
			
		
		
	
		
	}
	
	
	
	
	
	
	

</style>